$side-shadow-color: rgb(0, 0, 0, 0.3);

.chinesechess-chess {
  position: absolute;
  left: 0px;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  opacity: 1;
  z-index: 5;
  width: calc(var(--chess-radius) * 2px);
  height: calc(var(--chess-radius) * 2px);
  font-size: calc(var(--chess-radius) * 1px + 2px);
  cursor: default;
  transform: var(--pos-transform);
  transition: transform var(--transform-duration, 0.05s) var(--transform-timing-function, ease-out);

  &.red {
    color: var(--first-color);
    border-color: var(--first-color);
  }
  
  &.black {
    color: var(--second-color);
    border-color: var(--second-color);
  }

  &.selected {
    transition: transform 0.05s ease-out;
  }

  &.selected,
  &.overlay {
    z-index: 37 !important;
    transform: var(--pos-transform) scale(1.2) !important;
    > .side {
      box-shadow:
        var(--side-shadow-offset-overlay, 12px)
        var(--side-shadow-offset-overlay, 16px)
        4px -5px var(--side-shadow-color, $side-shadow-color);
    }
  }

  &.side:before {
    transition: all 0.2s ease;
  }

  &.lit {
    > .side {
      &:before {
        position: absolute;
        content: ' ';
        width: calc(100% + 8px);
        height: calc(100% + 8px);
        box-shadow: inset 0px 0px 2px 1px rgba(255, 255, 255, 0.6), 0px 0px 4px 2px #fff;
        border-radius: 100%;
      }
    }
  }

  &.selectable > .side:hover:before,
  &.selected > .side:before {
    position: absolute;
    content: ' ';
    width: calc(100% + 5px);
    height: calc(100% + 5px);
    border: 2px solid #fff;
    border-radius: 4px;
  }

  &.selected > .side:before {
    box-shadow:
      0px 0px 10px 1px rgba(255, 255, 255, 0.6),
      inset 0px 0px 4px 1px rgb(255, 255, 255, 0.4);
    animation: animation-chinesechess-chess-selected-focus 1s linear infinite;
  }

  > .side {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    text-align: center;
    background: var(--broadside-color);
    box-shadow:
      var(--side-shadow-offset, 6px)
      var(--side-shadow-offset, 6px)
      4px 0px var(--side-shadow-color, $side-shadow-color);
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.1));
    backface-visibility: hidden; 
    transform-style: preserve-3d;
    transition: transform 0.15s, box-shadow 0.05s ease-out;

    .chess__circle {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 100%;
      border: 1px solid;
      box-sizing: content-box;
      pointer-events: none;
      background: var(--background);
      font-size: larger;
      font-weight: 400;
      font-family: 'founder-simli';
    }  
  }

  &.smaller {
    > .side {
      .chess__circle {
        font-size: smaller;
      }
    }
  }

  > .front {
    transform: rotateX(0deg);
  }
  > .back {
    transform: rotateX(-180deg);

    .chess__circle {
      background: var(--back-background, var(--background));
    }
  }

  &.is-back {
    > .front {
      transform: rotateX(180deg);
    }
    > .back {
      transform: rotateX(0deg);
    }
  }  
}

@keyframes animation-chinesechess-chess-selected-focus {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}